<template>
  <div class="app-container">
    <table-layout title="角色列表">
      <template v-slot:operate>
        <el-button type="primary" @click="onAdd">添加角色</el-button>
      </template>
      <el-table :data="roles">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="角色名称" prop="name" />
        <el-table-column label="角色code" prop="code" />
        <el-table-column label="角色描述" prop="description" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <span class="operate" @click="onEdit(row.id)">编辑</span>
          </template>
        </el-table-column>
      </el-table>
    </table-layout>
  </div>
</template>

<script>
import TableLayout from '@/components/TableLayout'
import { getList } from '@/api/role'

export default {
  name: 'Menu',
  components: {
    TableLayout
  },
  data() {
    return {
      roles: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getList().then(res => {
        this.roles = res.data
      })
    },
    onAdd() {
      this.$router.push('/auth/role/add')
    },
    onEdit(id) {
      this.$router.push(`/auth/role/edit/${id}`)
    }
  }
}
</script>

<style></style>
